<template>
	<view style="position: relative;;padding: 32rpx; box-sizing: border-box; background-color: #FFFFFF;height: 100vh;display: flex; flex-direction: column; justify-content: space-between;align-items: center">
		
		
		<view class="">
			
			<!-- 收益休息 -->
			<view class="user" style="margin-bottom: 30rpx;padding: 32rpx;border-radius: 24rpx;background-color: #FF4D4F; height: 312rpx;width: 95vw;display: flex;justify-content: space-between;place-items: center;box-sizing: border-box;">
				
				<!-- 昵称,个性签名 -->
				<view class="left-item" style="height: 100%;width: 50%; ">
					<view class="left-item-top" style="height: 50%;display: flex;flex-flow: column;justify-content: space-evenly;align-items: flex-start;" >
						<text style="font-size: 28rpx;color: #FFFFFF;">预估总收益</text>
						<text style="font-size: 56rpx;color: #FFFFFF;">12586.00</text>
					</view>
			
					<view class="left-item-bottom" style="height: 50%;display: flex;flex-flow: column;justify-content: space-evenly;align-items: flex-start;">
						<text style="font-size: 28rpx;color: #FFFFFF;">本月收益</text>
						<text style="font-size: 36rpx;color: #FFFFFF;">3856.00</text>
						
					</view>
				</view>
				<view class="right-item">
					<button style=""> <text style="color:#FF4D4F">立即提现</text></button>
				</view>
			
			</view>
			
			
			
			<view class="" style="width: 95vw;display: flex;flex-direction: column;justify-content: center;margin-bottom: 32rpx;">
				
				<view style="width: 100%;height: 56rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-bottom: 12px;">
					<text style="font-size: 36rpx;">个人资料</text>
					
					<view class="" style="display: flex;justify-content: center;align-items: center;" @click="toEditInfo">
						<text style="font-size: 28rpx;color: #4B5563;">修改资料
						</text>
						<image src="../../static/img/mine/arrow.jpg" mode="" class="img" style="width: 14rpx;height: 25rpx;margin-left: 10px;"></image>
					</view>
				
				</view>
				
				<view style="background-color: #F9FAFB;width: 100%;display: flex;border-radius: 6px; flex-direction: row;align-items: center;padding: 25rpx;height: 90rpx;box-sizing: border-box;margin-bottom: 16rpx;">
					<image src="../../static/img/mine/people.jpg" mode="" class="img" style="width: 12px;height: 14px;"></image>
					<text style="color: #4B5563;font-size: 28rpx;margin-left: 12px;">{{userInfo.real_name}}</text>
				</view>
				
				<view style="background-color: #F9FAFB;width: 100%;display: flex;border-radius: 6px; flex-direction: row;align-items: center;padding: 25rpx;height: 90rpx;box-sizing: border-box;margin-bottom: 16rpx">
					<image src="../../static/img/mine/call.jpg" mode="" class="img" style="width: 12px;height: 14px;"></image>
					<text style="color: #4B5563;font-size: 28rpx;margin-left: 12px;">{{userInfo.bank_card_phone}}</text>
				</view>
				
				<view style="background-color: #F9FAFB;width: 100%;display: flex;border-radius: 6px; flex-direction: row;align-items: center;padding: 25rpx;height: 90rpx;box-sizing: border-box;margin-bottom: 16rpx">
					<image src="../../static/img/mine/card.jpg" mode="" class="img" style="width: 12px;height: 14px;"></image>
					<text style="color: #4B5563;font-size: 28rpx;margin-left: 12px;">{{userInfo.id_card_no}}</text>
				</view>
				
				<view style="background-color: #F9FAFB;width: 100%;display: flex;border-radius: 6px; flex-direction: row;align-items: center;padding: 25rpx;height: 90rpx;box-sizing: border-box;">
					<image src="../../static/img/mine/bank.jpg" mode="" class="img" style="width: 12px;height: 14px;"></image>
					<text style="color: #4B5563;font-size: 28rpx;margin-left: 12px;">{{userInfo.bank_card_no}}</text>
				</view>
				
			</view>
			
			
			<!-- 收益记录 -->
			<view class="" style="width: 95vw;display: flex;flex-direction: column;justify-content: center;">
				
				<view style="width: 100%;height: 56rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-bottom: 12px;">
					<text style="font-size: 36rpx;">收益记录</text>
				<view class="" style="display: flex;justify-content: center;align-items: center;" @click="toMore">
					<text style="font-size: 28rpx;color: #4B5563;" >更多
					</text>
					<image src="../../static/img/mine/arrow.jpg" mode="" class="img" style="width: 14rpx;height: 25rpx;margin-left: 10px;"></image>
				</view>
				</view>
				
	
				<!-- 收益 -->
				<view v-for="(m,n) in incomeList" :key="n" style="background-color: #F9FAFB;width: 100%;height: 138rpx;display: flex;border-radius: 6px; flex-direction: row;align-items: center;padding: 12rpx;box-sizing: border-box;margin-bottom: 16rpx;justify-content: space-between;">
					<view style="display: flex;justify-content: space-evenly;align-items: flex-start;flex-direction: column;height: 100%;">
						<text style="font-size: 28rpx;color: #111827;">收益</text>
						<text style="color: #6B7280;font-size: 28rpx;">{{m.time}}</text>
					</view>
					
					<view class="" style="color: #FF4D4F;font-size: 24rpx;display: flex;justify-content: flex-end;align-items: center;">
						{{m.money}}
					</view>
					
				</view>
			</view>
		</view>
	
		
		<view v-if="staff_id" class="" style="animation-delay: 0.7s;width: 95vw;border-radius: 4rpx;box-sizing: border-box;background-color: #FF4D4F;">
			<view class="">
			<button  class="" style="background-color: #FF4D4F;" @click="toDecoration">
				<text style="border: 4rpx;font-family: Roboto;color: #FFFFFF;"> 装修店铺</text>
			</button>
			</view>
		</view>		
	
	</view>

</template>
<script>
	import {
	  mapState,
	  mapMutations,
	  mapGetters
	 } from 'vuex';
	 
	export default {
		data() {
			return {
				page:1,
				size:10,
					// staff_id:"",
				staff_id:uni.getStorageInfoSync("staff_id"),
				incomeList:[{
					time:"2025-08-01 12:00:00",
					money:"123.00"
				},{
					time:"2025-08-01 12:00:00",
					money:"123.00"
				}],
	
				
				//个人信息,
				userInfo: {
					bank_card_no: "",
					bank_card_phone: 0,
					id_card_back: '',
					id_card_front: '',
					id_card_no: '',
					real_name: ''
				}
				
			}
		},
		computed: {
			...mapGetters(['inviteCode','uid'])
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
		
	
			
		},
		onShow() {
			// 判断是否有token
			var token = uni.getStorageSync('token')
			var uid = uni.getStorageSync('uid')
			if (!token) {
				uni.navigateTo({
					url: '/pages/splash-screen/splash-screen'
				})
			}else{
				this.loadMyUserInfo();
				
				//获取收益
				this.getMyIncome();
			} 
		},
		onReady() {
			// //此处，演示,每次页面初次渲染都把登录状态重置
			// uni.setStorage({
			// 	key: 'UserInfo',
			// 	data: false,
			// 	success: function() {},
			// 	fail: function(e) {}
			// });
		},
		methods: {
			
			//进入装修店铺
			toDecoration(){
				console.log("店铺装修")
				uni.navigateTo({
					url: '/pages/decoration-shop/decoration-shop'
				})
				
			},
		
			
			toMore() {
				uni.navigateTo({
					url: '../my-income/myincome'
				})
			},
			toEditInfo() {
				uni.navigateTo({
					url: '../edit-basicInfo/edit-basicInfo'
				})
			},
		
			loadMyUserInfo() {
				let that = this
				this.$pin.request('GET', '/users/profile', null,
					successData => {
						that.userInfo = successData.data
				
					},
					failData => {
						console.log(failData)
						uni.showToast({
							icon: 'none',
							title: '加载用户信息时出错'
						})
					}
				)
			},
			getMyIncome(){
				let that = this;
				var param = {
					page:this.page,
					size:this.size
				}
				this.$pin.request('GET', '/commission_payout/income', param,
					successData => {
						
					},
					failData => {
						console.log(failData)
						uni.showToast({
							icon: 'none',
							title: '加载用户信息时出错'
						})
					}
				)
			}
		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
	}

	
</style>
